<template>
  <el-dialog
    title="工序信息详情"
    :visible.sync="dialogVisible"
    :modal="true"
    :appendToBody="true"
    width="900px"
    v-dialog-drag
    :close-on-click-modal="false"
    top="5vh"
    @close="handleClose()"
    @open="handleOpen()"
  >
    <el-form
      :model="form"
      :rules="rules"
      ref="ruleForm"
      label-width="120px"
      :disabled="!canEdit"
    >
      <el-form-item label="工序编码" prop="workSectionCode">
        <el-input
          type="text"
          v-model="form.workSectionCode"
          placeholder="请输入工序编码"
          :disabled="!!form.id"
        ></el-input>
        <el-switch
          v-model="systemNumber"
          active-text="系统编号"
          class="system-num"
          :disabled="!!form.id"
          @change="handleGetCode"
        >
        </el-switch>
      </el-form-item>
      <el-form-item label="工序名称" prop="workSectionName">
        <el-input
          type="text"
          v-model="form.workSectionName"
          placeholder="请输入工序名称"
        ></el-input>
      </el-form-item>
      <el-form-item label="工序描述" prop="remark" class="full-width">
        <el-input
          type="textarea"
          v-model="form.remark"
          :rows="4"
          placeholder="请输入工序描述"
        ></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button
        v-if="canEdit"
        type="primary"
        :loading="saveloading"
        @click="handleSubmit"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import {
  getWorkSection,
  addOrUpdateWorkSection,
} from "@/api/workMgmt/workSection";
import { getNextCodeByModule } from "@/api/common";
import { checkPermi } from "@/utils/permission";
export default {
  components: { },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    row: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      form: {
        id: null,
        workSectionCode: null,
        workSectionName: null,
        remark: null,
      },
      rules: {
        workSectionCode: [
          { required: true, message: "请输入工序编码", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9]+$/,
            message: "支持字母(A-Z、a-z)、数字(0-9)",
            trigger: "blur",
          },
          { max: 32, message: "32个字符以内", trigger: "blur" },
        ],
        workSectionName: [
          { required: true, message: "请输入工序名称", trigger: "blur" },
          {
            pattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
            message: "支持中文、字母(A-Z、a-z)、数字(0-9)和下滑线",
            trigger: "blur",
          },
          { max: 32, message: "32个字符以内", trigger: "blur" },
        ],
      },
      saveloading: false,
      systemNumber: false,
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val);
      },
      get() {
        return this.visible;
      },
    },
    canEdit() {
      if (this.row?.id) {
        return checkPermi(["workMgmt:workSection:edit"]);
      }
      return true;
    },
  },
  methods: {
    handleClose() {
      this.saveloading = false;
      this.resetFormData();
    },
    handleOpen() {
      this.getDetail();
    },
    getDetail() {
      if (!this.row?.id) {
        this.resetFormData();
        return;
      }
      getWorkSection(this.row.id)
        .then((res) => {
          if (res.code == 200 && res.data) {
            const { id, workSectionCode, workSectionName, remark } = res.data;
            this.form = {
              id,
              workSectionCode,
              workSectionName,
              remark,
            };
          } else {
            this.resetFormData();
          }
        })
        .catch(() => {
          this.resetFormData();
        });
    },
    handleSubmit() {
      if (!this.canEdit) {
        return;
      }
      this.saveloading = true;
      this.$refs.ruleForm.validate((flag) => {
        if (flag) {
          const { id, workSectionCode, workSectionName, remark } = this.form;
          const params = {
            id,
            workSectionCode,
            workSectionName,
            remark,
          };
          addOrUpdateWorkSection(params)
            .then((res) => {
              if (res.code == 200) {
                this.msgSuccess(id ? "修改成功！" : "新增成功！");
                this.$emit("submit-success");
                this.dialogVisible = false;
              }
              this.saveloading = false;
            })
            .catch(() => {
              this.saveloading = false;
            });
        } else {
          this.saveloading = false;
        }
      });
    },
    resetFormData() {
      this.$refs.ruleForm?.resetFields();
      this.form = {
        id: null,
        workSectionCode: null,
        workSectionName: null,
        remark: null,
      };
      this.systemNumber = false;
    },
    handleGetCode(value) {
      if (value == true) {
        getNextCodeByModule("WORK_SECTION").then((res) => {
          if (res.code == 200) {
            this.form.workSectionCode = res.data || null;
            this.$refs.ruleForm.validateField("workSectionCode");
          }
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  .el-form-item {
    width: 49%;
    &.full-width {
      width: 100%;
    }
  }
  ::v-deep .el-form-item__content {
    display: flex;
    align-items: center;
    .system-num {
      white-space: nowrap;
      margin-left: 10px;
    }
    .el-date-editor.el-input,
    .el-select,
    .el-cascader,
    .factory-select {
      width: 100%;
    }
  }
}
</style>
